<template>
  <div class="space-y-4">
    <div class="p-3 border bg-white rounded-card">
      <div class="font-medium">审批请求: "客服对话模板 v2.1" 发布申请</div>
      <div class="text-sm text-gray-500">申请人: 张三 | 申请时间: 2024-01-20 | 状态: 待审批</div>
    </div>

    <div class="grid lg:grid-cols-2 gap-4">
      <div class="p-3 border bg-white rounded-card">
        <div class="text-sm text-gray-600 mb-2">变更对比</div>
        <div class="border rounded p-2 text-sm">
          - 旧版本 (v2.0): 您好，我是客服助手
          <br />
          + 新版本 (v2.1): 您好，我是智能客服助手，很高兴为您服务
        </div>
      </div>
      <div class="p-3 border bg-white rounded-card">
        <div class="text-sm text-gray-600 mb-2">实验报告</div>
        <ul class="text-sm text-gray-700 list-disc pl-5">
          <li>准确率: 92.5%</li>
          <li>响应时间: 1.2s</li>
          <li>用户满意度: 4.3/5</li>
          <li>测试用例: 25个</li>
          <li>通过率: 96%</li>
        </ul>
      </div>
    </div>

    <div class="p-3 border bg-white rounded-card">
      <div class="text-sm text-gray-600 mb-2">审批意见</div>
      <textarea class="w-full h-28 border rounded-card p-2" placeholder="请输入审批意见..."></textarea>
      <div class="mt-2 flex gap-2">
        <button class="px-3 py-2 bg-green-600 text-white rounded-btn text-sm">通过</button>
        <button class="px-3 py-2 bg-danger text-white rounded-btn text-sm">驳回</button>
        <button class="px-3 py-2 border rounded-btn text-sm">需要补充材料</button>
      </div>
    </div>

    <div class="p-3 border bg-white rounded-card">
      <div class="text-sm text-gray-600 mb-2">审批历史</div>
      <ul class="text-sm text-gray-700 list-disc pl-5">
        <li>2024-01-18 14:00 李四: 同意进入测试阶段</li>
        <li>2024-01-19 09:30 王五: 建议增加边界用例测试</li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
</style>